<template>
  <div>
    <div>
      <el-form ref="form" :model="form" label-width="80px">
         <el-row>
          <el-col :span="7">
            <el-form-item label="作业单位">
              <el-select v-model="form.cementCompany" placeholder="请选择作业单位">
                <el-option label="川东钻探" value="shanghai"></el-option>
                <el-option label="川西钻探" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="开钻时间">
              <el-date-picker v-model="form.date1" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="-">
              <el-date-picker v-model="form.date2" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
           <el-col :span="1">
            <el-form-item label="">
              <el-button type="primary" @click="onSubmit">分析</el-button>
            </el-form-item>
          </el-col>
        </el-row>
       
       
      </el-form>
    </div>
   <div>
        <div id="myChart" style="border: 1px solid black;width:97%;height:500px">
        </div>
        <div id="myChart2" style="border: 1px solid black;width:97%;height:500px">
        </div>
        <div id="myChart3" style="border: 1px solid black;width:97%;height:500px">
        </div>
        <div id="myChart4" style="border: 1px solid black;width:97%;height:500px">
        </div>
      </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  require('echarts/lib/chart/bar')
  require('echarts/lib/chart/pie')
  require('echarts/lib/chart/line')
  export default {
    data() {
      return {
        form: {
          country: '',
          area: '',
          block: '',
          welltype: '',
          wellSpacing: '',
          delivery: '',
          wellCategory: '',
          cementCompany: '',
          date1: '',
          date2: '',
          casingSize: '',
          casingType: '',
          cementType: '',
          wellName: ''
        }
      }
    },
    mounted() {
      this.drawLine();
      this.drawLine2();
      this.drawLine3();
      this.drawLine4();
    },
   methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
         title: {
            text: '井别与固井质量关系',
            left: 'center'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['生产井', '探井', '调整井']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '优',
              type: 'bar',
              barGap: 0,
              data: [320, 332, 160]
            },
            {
              name: '中',
              type: 'bar',
              data: [34, 22, 21]
            },
            {
              name: '差',
              type: 'bar',
              data: [23, 12, 9]
            }
          ]
        });
      },
      drawLine2() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart.setOption({
        title: {
            text: '井型与固井质量关系',
            left: 'center'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['直井', '定向井', '水平井']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '优',
              type: 'bar',
              barGap: 0,
              data: [320, 332, 301]
            },
            {
              name: '中',
              type: 'bar',
              data: [12, 15, 22]
            },
            {
              name: '差',
              type: 'bar',
              data: [2, 10, 3]
            }
            
          ]
        });
      },
     drawLine3() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart3'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '区域与固井质量关系',
            left: 'center'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['四川盆地', '新疆区域', '区域2','区域3','区域4']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '优',
              type: 'bar',
              barGap: 0,
              data: [320, 282, 121, 45,56]
            },
            {
              name: '中',
              type: 'bar',
              data: [12, 15, 22, 4,3]
            },
            {
              name: '差',
              type: 'bar',
              data: [2, 10, 3, 2,2]
            }
            
          ]
        });
      },
      drawLine4() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart4'))
        // 绘制图表
        myChart.setOption({
        title: {
            text: '水泥浆体系与固井质量关系',
            left: 'center'
          },
          color: ['#003366', '#006699', '#4cabce'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: ['Forest', 'Steppe', 'Desert']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar', 'stack']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            data: ['低密度高强度水泥浆体系', '低密度水泥浆体系', '聚合物防窜水泥浆体系', '般土水泥浆体系']
          }],
          yAxis: [{
            type: 'value'
          }],
          series: [{
              name: '优',
              type: 'bar',
              barGap: 0,
              data: [220, 132, 301, 154]
            },
            {
              name: '中',
              type: 'bar',
              data: [20, 812, 19, 12]
            },
            {
              name: '差',
              type: 'bar',
              data: [2, 3, 2, 3]
            }
          ]
        });
      }
    }
  }
</script>